<template>
  <div>
    <div class="box-left-card">
      <section>
        <div>较上日+ {{ store.ChinaAdd.localConfirmH5 }}</div>
        <div>{{ store.ChinaTotal.localConfirm }}</div>
        <div>本土现有确诊</div>
      </section>
      <section>
        <div>较上日+ {{ store.ChinaAdd.nowConfirm }}</div>
        <div>{{ store.ChinaTotal.nowConfirm }}</div>
        <div>现有确诊</div>
      </section>
      <section>
        <div>较上日+ {{ store.ChinaAdd.confirm }}</div>
        <div>{{ store.ChinaTotal.confirm }}</div>
        <div>累计确诊</div>
      </section>
      <section>
        <div>较上日+ {{ store.ChinaAdd.noInfect }}</div>
        <div>{{ store.ChinaTotal.noInfect }}</div>
        <div>无症状感染者</div>
      </section>
      <section>
        <div>较上日+ {{ store.ChinaAdd.importedCase }}</div>
        <div>{{ store.ChinaTotal.importedCase }}</div>
        <div>境外输入</div>
      </section>
      <section>
        <div>较上日+ {{ store.ChinaAdd.dead }}</div>
        <div>{{ store.ChinaTotal.dead }}</div>
        <div>累计死亡</div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useListStore } from '@/stores/index'
import { onMounted } from 'vue'

const store = useListStore()


onMounted(async () => {
  await store.getList()
  console.log('cardmounted')
  boardInit()
})
//左侧看板数据初始化
const boardInit = () => {
  store.ChinaAdd = store.list.diseaseh5Shelf.chinaAdd
  store.ChinaTotal = store.list.diseaseh5Shelf.chinaTotal
}
</script>

<style scoped lang="scss">
$itemColor: #41b0db;
$itemBg: #223651;
$itemBorder: #212028;


.box-left-card {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  section {
    color: #eee;
    background: rgba(34, 54, 81,.5);
    border: 1px solid $itemBorder;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    div:nth-child(2) {
      color: $itemColor;
      padding: 10px 0;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
